<!-- 新增编辑车辆 -->
<template>
  <div>
    <el-dialog
      title="新增车辆"
      :visible.sync="dialogFormVisible"
      width="600px"
      :before-close="dialogFormH"
      class="add-form-dialog"
      @close="resetFormData"
    >
      <el-form
        ref="dataForm"
        :rules="ruleInline"
        label-position="right"
        label-width="140px"
        style="width: 100%"
        :model="formBase"
      >
        <el-form-item label="车辆类型" required>
          <el-select
            v-model="formBase.truckTypeName"
            placeholder="请选择"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in vehicleType"
              :key="item.id"
              :label="item.truckTypeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="licensePlate">
          <el-input v-model="formBase.licensePlate" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="deviceGpsId">
          <el-input v-model="formBase.deviceGpsId" placeholder="请输入GPS设备ID" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button
          class="save-btn"
          @click="createData"
          type="danger"
        >确认
        </el-button>
        <el-button
          class="cancel-btn"
          @click="dialogFormH"
        >取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { addTruck } from '@/api/vehicle'

export default {
  name: 'VehicleAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    },
    agencyOptions: {
      type: Array,
      required: true
    },
    vehicleType: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      flag: true,
      ruleInline: {
        deviceGpsId: [
          { required: true, message: '请输入GPS设备ID', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' }
        ],
        truckTypeName: [
          { required: true, message: '请选择车辆类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetFormData() {
      this.$refs['dataForm'].resetFields()
    },
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
      this.$refs['dataForm'].resetFields()
    },
    createData() {
      if (!this.flag) {
        return
      }
      this.flag = false
      this.$refs['dataForm'].validate(async (valid) => {
        if (valid) {
          const data = this.formBase
          console.log(data, 1111)
          await addTruck(data)
            .then((res) => {
              if (String(res.code) === '200') {
                this.$message.success('新增车辆成功')
                this.$emit('resetForm', this.formBase)
                this.dialogFormH()
              } else {
                this.$message.error(res.msg || '车辆新增失败')
              }
              this.flag = true
            })
            .catch((err) => {
              this.$message.error(err.msg || '新增车辆失败')
            })
        } else {
          this.flag = true
          this.$message.error('请按照提示填写!')
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 40px 50px 0 20px !important;
}
</style>
